<template>
	<view class="scroll-container">
		<u-navbar :is-back="false" title="订单" :background="navbarBg" title-color="#fff" :border-bottom="false"></u-navbar>
		<view class="fixed">
			<view class="search-box">
				<view class="search" @click="search">
					<u-icon class="icon-search" name="search" label-size="30"></u-icon>
					<span>搜索</span>
				</view>
			</view>
		</view>
		<u-dropdown @open="dropdown" ref="uDropdown" @close="refresh">
			<u-dropdown-item v-model="chooseDate" :title="chooseDate ? chooseDate :'订单日期'"></u-dropdown-item>
			<u-dropdown-item v-model="orderStatus" title="订单状态" :options="orderStatusList"></u-dropdown-item>
		</u-dropdown>
		
		<u-picker mode="time" v-model="chooseDateShow" :params="params" @confirm="confirmDate"></u-picker>
		
		<mescroll-uni ref="mescrollRef" :top="top" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="list">
				<view class="card" v-for="(item,index) in dataList" :key="index" @click="linkToDetail(item.id)">
					<view class="card-hd">{{item.title}}</view>
					<view class="card-bd">
						<view class="item">
							<span class="item-t">供应商单位：</span>
							<span class="item-v u-line-1">{{item.supplierName || '待选择'}}</span>
						</view>
						<view class="item">
							<span class="item-t">要求供应时间：</span>
							<span class="item-v u-line-1">{{item.supplyTime || '待选择'}}</span>
						</view>
						<view class="item">
							<span class="item-t">卸货位置：</span>
							<span class="item-v u-line-1">{{item.locationName}}</span>
						</view>
						<view class="item">
							<span class="item-t">预计所需算量：</span>
							<span class="item-v u-line-1">{{item.totalBudget}}t</span>
						</view>
					</view>
					<view class="card-fd">
						<span>{{item.createTime}}</span>
					</view>
					
					<view  class="status primary">{{item.status | statusTxt}}</view>
				</view>	
				
			</view>
		</mescroll-uni>
		
		<view class="add" @click="add" v-if="$_bauth('purchase_create')"></view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import moment from 'moment'
	import config from '@/common/config.js'
	export default{
		mixins:[MescrollMixin],
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				top:0,
				chooseDateShow:false,
				chooseDate:'',
				createTime:{
					createTimeStart:moment().format('YYYY-MM')+ '-' + '01 00:00:00',
					createTimeEnd:moment().format('YYYY-MM')+ '-' + moment().daysInMonth() + ' 59:59:59',
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				orderStatusList:[
					{label:'全部订单',value:'2,3,4,6'},
					{label:'待发货',value:2},
					{label:'已发货',value:3},
					{label:'已验货',value:4},
					{label:'已结算',value:6}
				],
				orderStatus:'2,3,4,6',
				dataList:[],
				upOption:{
					empty:{
						tip:"~暂无数据~"
					}
				},
			}
		},
		onLoad(){
			this.top = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(314) + 'px' 
			// new Promise((resvole,reject) => {
			// 	this.$u.api.getUserAuth().then(res => {
			// 		if(res.code != 0){
			// 			this.btnLoading = false
			// 			this.isAuth = false
			// 			reject()
			// 		}else{
			// 			this.$u.vuex('vuex_authList',JSON.stringify(res.data))
			// 			resvole()
			// 		}
			// 	})
			// })
		},
		filters:{
			statusTxt(v){
				return config.orderStatus[v]
			}
		},
		methods:{
			search(){
				uni.navigateTo({
					url:"/pages/search/index?type=order"
				})
			},
			//添加计划
			add(){
				uni.navigateTo({
					url:"/pages/project/add"
				})
			},
			dropdown(e){
				if(e == 0){
					this.chooseDateShow = true
				}
			},
			confirmDate(e){
				this.chooseDate = `${e.year}年${e.month}月`
				let createTime = {
					createTimeStart:`${e.year}-${e.month}` + '-' + '01 00:00:00',
					createTimeEnd:`${e.year}-${e.month}` + '-' + moment().set({'year': e.year, 'month': (parseInt(e.month) - 1)}).daysInMonth() + ' 59:59:59',
				}
				this.createTime = this.$u.deepClone(createTime)
				this.$refs.uDropdown.close();
				// this.$nextTick(()=>{
				// 	this.$refs.mescrollItem[this.activeTab].refresh()
				// })
			},
			refresh(){
				this.$nextTick(()=>{
					this.dataList = [];
					this.mescroll.resetUpScroll()
				})
			},
			upCallback(page) {
				this.$u.api.getOrderList({current:page.num,size:page.size,status:this.orderStatus,createTimeStart:this.createTime.createTimeStart,createTimeEnd:this.createTime.createTimeEnd}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					let curPageData = res.data ? res.data.records : [];
					let curPageLen = curPageData.length; 
					let totalSize = res.data ? res.data.total : 0;
					if(totalSize > 0){
						uni.setTabBarBadge({
							index:2,
							text:totalSize.toString()
						})
					}else{
						uni.hideTabBarRedDot({
							index:2
						})
					}
					if(page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			linkToDetail(id){
				uni.navigateTo({
					url:`/pages/order/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseDate{
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: #fff;
		text{
			font-size: 30rpx;
			margin-right: 10rpx;
		}
	}
	.scroll-container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		.swiper-container{
			flex: 1;
		}
	}
	
	.search-box{
		padding: 32rpx 30rpx;
		background: linear-gradient(180deg, #0082FF 0%, rgba(0, 130, 255, 0.9) 36%, rgba(0, 130, 255, 0.57) 74%, rgba(0, 130, 255, 0) 100%);
		.search{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			color: #A7ADB3;
			.icon-search{
				margin-right: 6rpx;
			}
			span{
				font-size: 28rpx;
			}
		}
	}
	.add{
		position: fixed;
		line-height: 96rpx;
		text-align: center;
		width: 96rpx;
		height: 96rpx;
		background: #1378FF;
		box-shadow: 0px 10rpx 56rpx -16rpx rgba(19,120,255,1);
		border-radius: 100%;
		right:20rpx;
		bottom:160rpx;
		z-index: 99;
		&::after{
			content: "";
			width: 36rpx;
			height: 4rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
		}
		&::before{
			content: "";
			width: 4rpx;
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
		}
	}
	.list{
		padding: 0 30rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			position: relative;
			.card-hd{
				font-size: 34rpx;
				color:#28282C;
				font-weight: 600;
				margin-top: 5rpx;
				padding: 30rpx 24rpx 24rpx;
			}
			.card-bd{
				padding: 0 24rpx 8rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					.item-t{
						color: #798188;
					}
					.item-v{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
			.card-fd{
				display: flex;
				align-items: center;
				height: 80rpx;
				border-top: 1px solid rgba(212, 226, 237, 0.6);
				color: #A6B1BA;
				font-size: 24rpx;
				padding: 0 24rpx;
				span{
					margin-right: 16rpx;
				}
			}
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(255, 153, 0,0.1);
					color: #ff9900;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
	}
</style>
